<template>
  <div
    class="cms-views-container read-novel-pages"
    :class="type === 5 ? 'bg-[#ede4cd]' : type === 9 || type === 10 || type === 11 ? 'bg-black' : 'bg-[#f6f8fb]'"
  >
    <header
      class="absolute top-0 left-0 right-0 z-10 flex items-center justify-between w-full px-4 h-11"
      v-if="type !== 1"
      :class="type === 9 || type === 10 || type === 11 ? 'bg-[#2f3030]' : 'bg-white'"
    >
      <span v-if="type === 9 || type === 10 || type === 11" class="text-white">
        <LeftOutlined class="text-base text-[#929595]" />
      </span>
      <span v-else>
        <LeftOutlined class="text-base" />
      </span>
      <span>
        <span v-if="type === 9 || type === 10 || type === 11" class="text-white pr-[25px]">
          <img :src="novelIcons.icon_night_like" alt="" class="w-5 h-5" />
        </span>
        <span class="pr-[25px]" v-else>
          <span v-if="type !== 6">
            <img :src="novelIcons.title_like" alt="" class="w-5 h-5" />
          </span>
          <span v-else>
            <img :src="novelIcons.icon_liked" alt="" class="w-5 h-5" />
          </span>
        </span>
        <span v-if="type === 9 || type === 10 || type === 11" class="text-white">
          <img :src="novelIcons.icon_night_collect" alt="" class="w-5 h-5" />
        </span>
        <span v-else>
          <span v-if="type !== 7">
            <img :src="novelIcons.icon_collect" alt="" class="w-5 h-5" />
          </span>
          <span v-else>
            <img :src="novelIcons.collected" alt="" class="w-7 h-7" />
          </span>
        </span>
      </span>
    </header>
    <div
      class="px-6 pt-5 pb-4 text-sm leading-7"
      :class="type === 9 || type === 10 || type === 11 ? 'text-[#929595]' : 'text-[#484a4d]'"
    >
      <h3 class="text-base text-[#484a4d]">第一章 从红月开始</h3>
      <p>
        昏暗的工厂里，机床
        的黑影排成一排。那样子让雅也想到夜晚的墓地。不过，老爸要进入的坟墓并没有如此气派。黑影们看上去就像失去了主人的忠实奴仆。它们也许正和雅也怀着同样的心情，静静地迎接这个夜晚。<br />
        <br />
        雅也把盛着酒的茶碗送到嘴边。茶碗的边缘有个小缺口，正好碰在嘴唇上。喝干后，他叹了口气。<br />
        <br />
        旁边伸过一个酒瓶，把酒倒入他的空茶碗里。<br />
        <br />
        “以后在各方面都会有困难，但不要气馁，加把劲儿吧。“舅舅俊郎说。覆满他整个下巴的胡
        须已变得花白。他的脸红红的，呼出的气息有股烂柿子味。<br />
        <br />
        “也给舅舅添了不少麻烦。”雅也言不由衷地说。<br />
        <br />
        “这倒没什么。我担心你以后怎么办。但你有一技之长，应该不愁找工作。听说西宫的工厂已经录用你了？”<br />
      </p>
    </div>
    <button class="text-white text-sm w-[132px] h-10 absolute bottom-16 border-0 free-btn" v-if="type === 2">
      免费阅读全文
    </button>
    <div
      class="absolute bottom-0 left-0 right-0 h-[54px] flex px-[47px] justify-between bg-white items-center"
      v-if="type === 2 || type === 6 || type === 7 || type === 8"
    >
      <span v-for="item in functList" :key="item.title" class="flex flex-col items-center text-xs text-[#484a4d]">
        <img :src="item.lightIcon" alt="" class="mb-0.5" />
        <span>{{ item.title }}</span>
      </span>
    </div>
    <div
      class="absolute bottom-0 left-0 right-0 h-[54px] flex px-[47px] justify-between bg-[#2f3030] items-center"
      v-if="type === 9"
    >
      <span v-for="item in functList" :key="item.title" class="flex flex-col items-center text-xs text-[#929595]">
        <img :src="item.darkIcon" alt="" class="mb-0.5" />
        <span>{{ item.title }}</span>
      </span>
    </div>
    <div
      v-if="type === 3 || type === 10"
      class="absolute bottom-14 left-[38px] rounded w-[145px] h-[62px] text-sm pt-2 text-center"
      :class="type === 10 ? 'bg-[#2f3030] text-[#929595]' : 'bg-white text-[#484a4d]'"
    >
      第一章 从红月开始 2.28%
    </div>
    <div
      v-if="type === 3 || type === 10"
      class="absolute bottom-0 left-0 right-0 text-sm h-[54px] flex items-center px-4 justify-between"
      :class="type === 10 ? 'bg-[#2f3030] text-[#929595]' : 'text-[#484a4d] bg-white'"
    >
      <span>上一章</span>
      <span class="w-[227px]" v-if="type === 3">占位</span>
      <span class="w-[227px]" v-if="type === 10">占位</span>
      <span>下一章</span>
    </div>
    <div
      v-if="type === 4 || type === 5 || type === 11"
      class="absolute bottom-0 left-0 right-0 h-48"
      :class="type === 11 ? 'bg-[#2f3030] text-[#929595]' : 'bg-white text-[#484a4d]'"
    >
      <!-- <div @click="handleClick('articleSettings')" :class="{ 'component-selected': select === 'articleSettings' }">
        <div>
          <span class="text-xs">亮度</span>
          <span class="inline-block w-[211px] ml-5 mr-4">占位</span>
          <button
            class="h-7 rounded-xl px-3 text-xs bg-[#f6f8fb]"
            :class="
              type === 5
                ? 'active-border text-[#2167ff]'
                : type === 11
                ? 'bg-[#414242] text-[#929595] border-0'
                : 'border-0 text-[#484a4d]'
            "
          >
            跟随系统
          </button>
        </div>
        <div class="mt-4">
          <span class="text-xs">字号</span>
          <span class="inline-block w-[211px] ml-5 mr-4">占位</span>
          <button
            class="h-7 border-0 rounded-xl w-[72px] text-xs"
            :class="type === 11 ? 'bg-[#414242] text-[#929595]' : 'text-[#484a4d] bg-[#f6f8fb]'"
          >
            14
          </button>
        </div>
        <div class="flex items-center mt-4">
          <span class="text-xs">背景</span>
          <button
            class="h-7 ml-4 rounded-xl w-14 bg-[#f6f8fb]"
            :class="type === 4 ? 'active-border' : 'border-0'"
          ></button>
          <button
            class="h-7 ml-4 rounded-xl w-14 bg-[#ede4cd]"
            :class="type === 5 ? 'active-border' : 'border-0'"
          ></button>
          <button class="h-7 ml-4 border-0 rounded-xl w-14 bg-[#e4f0f0]"></button>
          <button class="h-7 ml-4 border-0 rounded-xl w-14 bg-[#faf0ee]"></button>
          <button class="h-7 ml-4 border-0 rounded-tl-xl rounded-bl-xl w-[31px] bg-[#edf2fd]"></button>
        </div>
        <div class="flex items-center mt-4">
          <span class="text-xs">翻页</span>
          <button
            class="ml-4 text-xs h-7 rounded-xl w-14"
            :class="type === 11 ? 'bg-[#414242] text-[#929595] border-0' : 'text-[#2167ff] bg-[#f6f8fb] active-border'"
          >
            仿真
          </button>
          <button
            class="ml-4 text-xs border-0 h-7 rounded-xl w-14"
            :class="type === 11 ? 'bg-[#414242] text-[#929595]' : 'text-[#484a4d] bg-[#f6f8fb]'"
          >
            平移
          </button>
          <button
            class="ml-4 text-xs border-0 h-7 rounded-xl w-14"
            :class="type === 11 ? 'bg-[#414242] text-[#929595]' : 'text-[#484a4d] bg-[#f6f8fb]'"
          >
            上下
          </button>
        </div>
      </div> -->

      <!-- 文章设置 -->
      <CmsArticleSetting
        :type="1"
        @click="handleClick('articleSettings')"
        :class="{ 'component-selected': select === 'articleSettings' }"
      />
    </div>
    <div v-if="type === 6 || type === 7 || type === 8" class="tip-box" :class="type === 7 ? 'w-[229px]' : ''">
      {{ type === 6 ? '谢谢你的喜欢' : type === 7 ? '收藏成功，可在“我的”页面查看' : '已取消' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import type { ComponentKeys } from '@cms/h5-editor'
import novelIcons from '../assets/novel'
import CmsComponents from '@cms/components'
const { CmsArticleSetting } = CmsComponents

withDefaults(defineProps<{ type: number; select?: ComponentKeys | undefined }>(), { type: 1 })
const functList = [
  {
    lightIcon: novelIcons.novel_catalog,
    darkIcon: novelIcons.night_catalog,
    title: '目录'
  },
  {
    lightIcon: novelIcons.schedule,
    darkIcon: novelIcons.night_process,
    title: '进度'
  },
  {
    lightIcon: novelIcons.night,
    darkIcon: novelIcons.daytime,
    title: '夜间'
  },
  {
    lightIcon: novelIcons.novel_setting,
    darkIcon: novelIcons.night_setting,
    title: '设置'
  }
]

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less">
.read-novel-pages {
  .free-btn {
    background-image: linear-gradient(134deg, #ff983f 0%, #ff613f 100%);
    border-radius: 20px;
    transform: translateX(-50%);
    left: 50%;
  }
  .active-border {
    border: 1px solid #2167ff;
  }
  .tip-box {
    @apply text-white text-sm absolute left-1/2 top-1/2 rounded px-4 py-2;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.65);
  }
}
</style>
